import React from 'react'
import {Col, Row} from "reactstrap"
import AnalyticsCard from "../../../components/@vuexy/analyticsCard/AnalyticsCard"
import AnalyticsCardLoader from '../../../components/@vuexy/analyticsCard/AnalyticsCardLoader'
import '../../../assets/scss/components/statistics-card.scss'

const AnalyticsCards = React.memo(props => {

  function percentDiff(key) {
    if (props.analytics.amount === undefined || props.percentData === undefined)
      return {color: '', value: `${0}%`}

    let old = props.analytics.amount[key] || 0
    let present = props.percentData[key] || 0
    const avg = ((old + present) / 2) || 1;
    const diff = old - present;
    const percent = ((diff / avg) * 100).toFixed(2)

    if (percent > 0) {
      return {color: '#28C76F', value: `+${percent}%`}
    } else {
      return {color: '#EA5455', value: `${percent}%`}
    }
  }

  return (
    <Row className="statistics-cards">
      <Col sm="6" lg="3">
        {
          props.analytics && props.analyticsStatus
            ? <AnalyticsCard
              title="Нравится"
              count={props.analytics.amount ? props.analytics.amount.likes : ''}
              data={props.analytics.likes ? props.analytics.likes : ''}
              color="#28C76F"
              percent={percentDiff("likes")}
            />
            : <AnalyticsCardLoader text='За выбранный период данных не найдено.' title="Нравится" minHeight="69px"/>
        }
      </Col>
      <Col sm="6" lg="3">
        {
          props.analytics && props.analyticsStatus
            ? <AnalyticsCard
              title="Репосты"
              count={props.analytics.amount ? props.analytics.amount.reposts : ''}
              data={props.analytics.reposts ? props.analytics.reposts : ''}
              color="#EA5455"
              percent={percentDiff("reposts")}
            />
            : <AnalyticsCardLoader text='За выбранный период данных не найдено.' title="Репосты" minHeight="69px"/>
        }
      </Col>
      <Col sm="6" lg="3">
        {
          props.analytics && props.analyticsStatus
            ? <AnalyticsCard
              title="Коментарии"
              count={props.analytics.amount ? props.analytics.amount.comments : ''}
              data={props.analytics.comments ? props.analytics.comments : ''}
              color="#28C76F"
              percent={percentDiff("comments")}
            />
            : <AnalyticsCardLoader text='За выбранный период данных не найдено.' title="Коментарии" minHeight="69px" />
        }
      </Col>
      <Col sm="6" lg="3">
        {
          props.analytics && props.analyticsStatus
            ? <AnalyticsCard
              title="Просмотры"
              count={props.analytics.amount ? props.analytics.amount.views : ''}
              data={props.analytics.views ? props.analytics.views : ''}
              color="#EA5455"
              percent={percentDiff("views")}
            />
            : <AnalyticsCardLoader text='За выбранный период данных не найдено.' title="Просмотры" minHeight="69px" />
        }
      </Col>
    </Row>
  )

})

export default AnalyticsCards
